<template>
	<div>
		<div style="margin-bottom: 10px;">
			<Button type="primary" @click="add">
				<Icon type="md-add"></Icon> 
				新增产品分类
			</Button>
		</div>
		<Table border :columns="columns" :data="data"></Table>
		<Modal v-model="modal" :title="modalType" :mask-closable="false" width='20%' :footer-hide="true">
			<Form :model="formItem" :label-width="100" :rules="ruleValidate" ref="formValidate">
				<FormItem label="分类名称(中)" prop="name">
					<Input v-model="formItem.name" placeholder="请输入分类名称"></Input>
				</FormItem>
				<FormItem label="分类名称(英)" prop="engName">
					<Input v-model="formItem.engName" placeholder="请输入分类名称"></Input>
				</FormItem>
				<FormItem label="分类名称(日)" prop="jpnName">
					<Input v-model="formItem.jpnName" placeholder="请输入分类名称"></Input>
				</FormItem>				
				<FormItem label="分类排序" prop="showOrder">
					<Input v-model="formItem.showOrder" placeholder="请输入分类排序"></Input>
				</FormItem>
				<FormItem>
					<Button type="primary" @click="submit">确认</Button>
					<Button style="margin-left: 8px" @click="cancel">取消</Button>
				</FormItem>
			</Form>
		</Modal>
		<Modal v-model="removeModal" width="360">
			<p slot="header" style="color:#f60;text-align:center">
				<Icon type="ios-information-circle"></Icon>
				<span>删除警告?</span>
			</p>
			<div style="text-align:center">
				<p>请确认是否删除这条记录</p>
			</div>
			<div slot="footer">
				<Button type="error" size="large" long @click="delOk">删除</Button>
			</div>
		</Modal>
	</div>

</template>
<script>
	export default {
		data() {
			return {
				categoryId: 2, // 产品分类ID 
				formItem: {
					name: '',
					showOrder: ''
				},
				ruleValidate: {
					name: [{
						required: true,
						message: '分类名称不能为空',
						trigger: 'blur'
					}],
					engName: [{
						required: true,
						message: '分类名称不能为空',
						trigger: 'blur'
					}],
					jpnName: [{
						required: true,
						message: '分类名称不能为空',
						trigger: 'blur'
					}]				
				},
				modal: false,
				delId: '',
				modalType: null,
				removeModal: false,
				columns: [
				    {
						title: '分类名称(中)',
						key: 'name'
					},
				    {
						title: '分类名称(英)',
						key: 'engName'
					},
				    {
						title: '分类名称(日)',
						key: 'jpnName'
					},					
					{
						title: '排序',
						key: 'showOrder'
					},
					{
						title: '操作',
						key: 'action',
						width: 150,
						align: 'center',
						render: (h, params) => {
							return h('div', [
								h('Button', {
									props: {
										type: 'primary',
										size: 'small'
									},
									style: {
										marginRight: '5px'
									},
									on: {
										click: () => {
											this.edit(params.row)
										}
									}
								}, '编辑'),
								h('Button', {
									props: {
										type: 'error',
										size: 'small'
									},
									on: {
										click: () => {
											this.remove(params.row)
										}
									}
								}, '删除')
							]);
						}
					}
				],
				data: []
			}
		},
		methods: {
			onLoad() {
				this.$Axios.Get(this.$baseUrl+'categorySub/list?categoryId=' + this.categoryId).then(res => {
					this.data = res
				})
			},
			add() {
				this.modalType = '新增'
				this.modal = true
				this.formItem = {
					name: '',
					showOrder: ''
				}
			},
			edit(row) {
				this.modalType = '编辑'
				this.modal = true
				this.formItem = {
					name: row.name,
					showOrder: row.showOrder,
					id: row.id,
					engName: row.engName,
					jpnName: row.jpnName
				}
			},
			remove(row) {
				this.removeModal = true
				this.delId = row.id
			},
			afterRequest(B) {
				if(B) {
					this.$Notice.success({
						title: '操作成功',
						desc: false
					});
					this.modal = false
					this.onLoad()
				} else {
					this.$Notice.error({
						title: '操作失败',
						desc: false
					});
				}
			},
			delOk() {
				this.$Axios.Get(this.$baseUrl+'categorySub/remove?ids=' + this.delId).then(res => {
					this.removeModal = false
					this.afterRequest(res)
				})
			},
			cancel() {
				this.$refs['formValidate'].resetFields();
				this.modal = false
			},
			submit() {
				this.$refs['formValidate'].validate((valid) => {
					if(valid) {
						this.formItem.categoryId = this.categoryId
						let url;
						if(this.modalType == '新增') {
							url = this.$baseUrl+'categorySub/save'
						} else {
							url = this.$baseUrl+'categorySub/update'
						}
						this.$Axios.Post(url, this.formItem).then(res => {
							this.afterRequest(res)
						})
					}
				})
			}
		},
		mounted() {
			this.onLoad()
		}
	}
</script>